<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
<!--                <el-form-item>
                  <el-input v-model="keyword" placeholder="关键字"></el-input>
                </el-form-item>-->
        <el-form-item>
          <el-button v-perm="'addProduct'" type="primary" @click="handleAdd">产品上新</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon-refresh" @click="renew"></el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="productLists" highlight-current-row v-loading="listLoading"
              @selection-change="selsChange" style="width: 100%;"  max-height="550px">
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
<!--      <el-table-column align="center" prop="id" width="60" label="ID">
      </el-table-column>-->
      <el-table-column align="center" prop="productName" label="产品名称" width="170" sortable>
      </el-table-column>
      <el-table-column align="center" prop="picture" label="产品图片" width="170" :header-align="'center'" :align="'center'" >

        <template slot-scope="{row}">
          <el-image :src="row.picture[0]" fit="contain"  class="image-container-box"   :preview-src-list="row.picture" ></el-image>
        </template>

<!--          <el-image :src="row.picture"></el-image>-->

      </el-table-column>
      <el-table-column align="center" prop="productClassify.productClassifyName" label="所属分类" width="140" sortable>
      </el-table-column>
      <el-table-column align="center" prop="productStock.stock" label="库存量" width="105" sortable>
      </el-table-column>
      <el-table-column align="center" prop="price" label="产品价格" width="110" sortable>
      </el-table-column>
      <el-table-column align="center" prop="state" label="产品状态" width="110">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0" class="status-label status-green">在售</span>
          <span v-else-if="scope.row.state === 1" class="status-label status-red">已下架</span>
          <span v-else-if="scope.row.state === 2" class="status-label status-grey">已删除</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="label" label="标签" width="180" >
        <template slot-scope="scope">
          <div class="tag-container">
      <span v-for="(tag, index) in scope.row.label" :key="index" class="tag-label">
        {{ tag }}
      </span>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="220">
        <template scope="scope">
          <el-button  size="small"  v-perm="'productList/showData'" type="text"  @click="showData(scope.$index, scope.row)"><i class="el-icon-tickets"/>详情</el-button>
          <el-button size="small"  v-perm="'productList/del'" type="text" @click="handleDel(scope.$index, scope.row)":disabled="isEditDisabled(scope.row.state)"> <i class="el-icon-delete"/>删除</el-button>
          <el-button size="small"  v-perm="'productList/update'" type="text" @click="handleEdit(scope.$index, scope.row)" :disabled="isEditDisabled(scope.row.state)"><i class="el-icon-edit-outline"/>编辑
          </el-button>
          <el-button size="small"  v-perm="'productList/offShelf'" type="text" @click="offShelf(scope.$index, scope.row)" :disabled="isOffShelfDisabled(scope.row.state)"><i class="el-icon-lock"/>下架
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[5, 10, 20, 50]"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     :current-page="currentPage" :page-size="pageSize"
                     :total="totals" style="float:right; margin-right: 40px;"  >
      </el-pagination>
    </el-col>

    <!--编辑界面-->
    <el-dialog title="产品修改" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="editForm.productName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品主图:" >
          <el-image v-for="(url, index) in editForm.picture"
                    :key="index" :src="url"
                    fit="contain"   :preview-src-list="editForm.picture"style="max-width: 100px; max-height: 100px;">
          </el-image>
          <el-upload
              class="upload-demo"
              name="file"
              :action="this.$uploadURL"
              :on-remove="handleFileRemove"
              :on-success="handleFileUploadeditpicture"
              :on-exceed="handleFileExceed"
              :file-list="fileList"
              :limit="1"
              :multiple="true"
              accept=".jpg,.png,.gif"
              list-type="picture"
          >
            <el-button size="small" type="primary">修改主图</el-button>

          </el-upload>
        </el-form-item>

        <el-form-item label="详情图片">
          <div class="image-list">
            <div v-for="(url, index) in editForm.detailsPicture" :key="index" @click="toggleSelection(index)" :class="{ 'selectState': isSelected(index) }" class="image-container">
              <!-- 图片 -->
              <img :src="url" class="image" alt />
              <!-- 选中状态 -->
              <i v-if="isSelected(index)" class="selected-icon"></i>

            </div>

          </div>
        </el-form-item>
        <el-form-item label="图片修改" v-if="hasSelectedImages">
          <el-upload
              class="upload-demo"
              name="file"
              :action="this.$uploadURL"
              :on-remove="handleFileRemove"
              :on-success="handleFileUploadedit"
              :on-exceed="handleFileExceed"
              :file-list="fileList"
              :limit="10"
              :multiple="true"
              accept=".jpg,.png,.gif"
              list-type="picture"
          >
            <el-button size="small" type="primary">修改图片</el-button>
            <el-button size="small" type="danger" @click="handleDeleteSelectedImages">删除选中图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="新增图片" >
          <el-upload
              class="upload-demo"
              name="file"
              :action="this.$uploadURL"
              :on-remove="handleFileRemove"
              :on-success="handleFileUpload"
              :on-exceed="handleFileExceed"
              :file-list="fileList"
              :limit="10"
              :multiple="true"
              accept=".jpg,.png,.gif"
              list-type="picture"
          >
            <el-button size="small" type="primary">详情图片</el-button>

          </el-upload>
        </el-form-item>

        <el-form-item label="产品分类" prop="classifyId">
          <el-select v-model="editForm.classifyId" placeholder="请选择该分类">
            <el-option v-for="item in classfiy"
                       :label="item.productClassifyName"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品价格">
          <el-input-number v-model="editForm.price" auto-complete="off" :min="1.00"  :step="0.10" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.state" placeholder="请选择状态" clearable>
            <el-option
                v-for="option in statusOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
            ></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="标签">
  <span v-if="editForm.label.length > 0">
    <el-tag
        v-for="(tag, index) in editForm.label"
        :key="index"
        closable
        @close="handleTagClose(index)"
    >{{ tag }}</el-tag>
  </span>
            <div v-show="showNewTagInput">
              <el-input v-model="newTagInput" placeholder="请输入新标签" @input="handleNewTagInput"></el-input>
              <el-button type="primary" @click="addTag">确认</el-button>
            </div>
            <el-button type="primary" @click="toggleNewTagInput">新建标签</el-button>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
<!--详情界面-->
    <el-dialog title="产品详情" :visible.sync="showFormVisible" :close-on-click-modal="false">
      <el-form :model="showForm" label-width="80px" :rules="showFormRules" ref="showForm">
        <hr class="custom-divider">
        <el-form-item label="产品名称:" >
         <span>{{showForm.productName}}</span>
        </el-form-item>
        <hr class="custom-divider">
        <el-form-item label="产品主图:" >
          <el-image v-for="(url, index) in showForm.picture"
                    :key="index" :src="url"
                    fit="contain"   :preview-src-list="showForm.picture"style="max-width: 100px; max-height: 100px;">
          </el-image>
        </el-form-item>
        <hr class="custom-divider">
        <el-form-item label="详情图片:" >
          <el-image v-for="(url, index) in showForm.detailsPicture"
                    :key="index" :src="url"
                    fit="contain"   :preview-src-list="showForm.detailsPicture"style="max-width: 100px; max-height: 100px;">
          </el-image>
        </el-form-item>
        <hr class="custom-divider">
        <el-form-item label="所属分类:">
          <div>{{ getCategoryNameById(showForm.classifyId) }}</div>
        </el-form-item>
        <hr class="custom-divider">
        <el-form-item label="产品价格:">
        <span>{{showForm.price}}</span>
        </el-form-item>
        <hr class="custom-divider">
        <el-form-item label="成本价格:">
          <span>{{showForm.costPrice}}</span>
        </el-form-item>
        <hr class="custom-divider">
        <el-form-item label="质检书:">
          <span>{{showForm.qualityCertifucate}}</span>
        </el-form-item>
        <hr class="custom-divider">
        <el-form-item label="附件信息:">
          <span>{{showForm.annex}}</span>
        </el-form-item>
        <hr class="custom-divider">
        <el-form-item label="产品简介:">
          <span>{{showForm.introduction}}</span>
        </el-form-item>
        <hr class="custom-divider">
        <el-form-item label="规格参数:">
          <span>{{showForm.spec}}</span>
        </el-form-item>
        <hr class="custom-divider">
        <el-form-item label="产品状态:">
          <span>{{ getStatusText(showForm.state) }}</span>
        </el-form-item>
        <hr class="custom-divider">
        <el-form-item label="产品标签">
  <span v-if="showForm.label.length > 0">
    <el-tag v-for="(tag, index) in showForm.label" :key="index">{{ tag }}</el-tag>
  </span>
        </el-form-item>
        <hr class="custom-divider">
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="showFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import util from '../../common/js/util'
//import NProgress from 'nprogress'
// import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

export default {
  data() {
    return {
      //分类搜索

      pageSize: 5,
      selectedSearchField: '', // 默认选择客户名称
      searchField: '',  // 选择进行什么分类查找

      //标签
      newTagInput: '', // 新标签的输入框
      showNewTagInput: false,


      //1.分页查询的相关数据
      productLists: [],
      total: 0,
      currentPage: 1,
      pageSizes: [5,10, 20, 50], // 可选择的每页条数
      listLoading: false,
      sels: [],//列表选中列
      selectedImages: [], // 存放用户选择的图片链接
      //2.高级查询相关数据
      keyword: '',
      editFormVisible: false,//编辑界面是否显示
      editLoading: false,
      editFormRules: {
        username: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ]
      },
      showFormVisible: false,//编辑界面是否显示
      showLoading: false,
      showFormRules: {
        username: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ]
      },
      //3编辑界面数据
      editForm: {
        productName:'',
        picture:[],
        classifyId:'',
        price:'',
        state:'',
        label:[],
        tags: [],
        detailsPicture:[],
      },
      //3详情界面数据
      showForm: {
        productName:'',
        picture:[],
        classifyId:'',
        price:'',
        state:'',
        label:[],
        tags: [],
        costPrice:'',//成本价
        spec:'',//规格
        annex:'',//附件
        qualityCertifucate:'',//质检书
        content:'',//内容
        introduction:'',//简介
      },
      fileList: [],
      classfiy:[],
    }
  },
  computed: {
    statusOptions() {
      return [
        { label: '在售', value: 0 },
        { label: '已下架', value: 1 },
        { label: '已删除', value: 2 },
      ];
    },
    hasSelectedImages() {
      return this.selectedImages.length > 0;
    },
  },

  methods: {
    //图片选中状态
    isSelected(index) {
      return this.selectedImages.includes(index);
    },
    toggleSelection(index) {
      const currentIndex = this.selectedImages.indexOf(index);
      if (currentIndex === -1) {
        // 如果图片未选中，则添加到选中列表
        this.selectedImages.push(index);
      } else {
        // 如果图片已选中，则从选中列表中移除
        this.selectedImages.splice(currentIndex, 1);
      }
    },
    handleDeleteSelectedImages() {
      // 删除选中的图片
      this.selectedImages.forEach(index => {
        this.editForm.detailsPicture.splice(index, 1);
      });

      // 清空 selectedImages 数组
      this.selectedImages = [];
    },


    handlePageSizeChange(val) {
      this.pageSize = val;
      this.getproductLists();
    },
    //判断是否是删除状态
    isEditDisabled(state) {
      // 根据产品状态判断是否禁用编辑按钮
      return state === 2; // 如果状态是2（已删除），则禁用编辑按钮
    },
    isOffShelfDisabled(state) {

      // 根据产品状态判断是否禁用下架按钮
      return state === 2; // 如果状态是2（已删除），则禁用下架按钮
    },
    getStatusText(state) {
      const statusOption = this.statusOptions.find(option => option.value === state);
      return statusOption ? statusOption.label : '';
    },
    renew() {
      location.reload();
    },

    handleNewTagInput() {
      // 处理新标签输入字段的输入
      this.newTagInput = this.newTagInput.trim();
    },
    addTag() {
      // 处理添加新标签
      if (this.newTagInput.trim() !== '') {
        this.editForm.label.push(this.newTagInput.trim());
        this.newTagInput = ''; // 清空输入字段
        this.showNewTagInput = false; // 隐藏输入字段和确认按钮
      }
    },
    handleTagClose(index) {
      // 处理删除现有标签
      this.editForm.label.splice(index, 1);
    },

    toggleNewTagInput() {
      // 切换显示/隐藏用于添加新标签的输入字段和确认按钮
      this.showNewTagInput = !this.showNewTagInput;

      if (!this.showNewTagInput) {
        // 隐藏时清空输入字段和重置状态
        this.newTagInput = '';
      } else {
        // 显示时，表示用户点击了新建标签按钮
        this.$nextTick(() => {
          // 在下一个 DOM 更新周期执行，确保 DOM 已经渲染
          this.$refs.newTagInput.focus(); // 将焦点设置到输入框
        });
      }
    },

//获取分类
    getclassify() {
      this.$http.get("/productClassify").then(res=>{
        this.classfiy = res.data;
      })
    },
    getCategoryNameById(classifyId) {
      // 找到对应的分类信息
      const category = this.classfiy.find(item => item.id === classifyId);

      // 返回分类名，如果找不到则返回空字符串
      return category ? category.productClassifyName : '';
    },
    //1.分页获取库存列表
    getproductLists() {
      let para = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword
      };
      this.listLoading = true;
      this.$http.post("/productList", para).then((res) => {
        this.totals = res.data.total;
        // 处理每个产品的标签，将空格分隔的字符串转换为数组
        this.productLists = res.data.records.map(product => {
          return {
            ...product,
            label: product.label ? product.label.split(' ') : [],// 将空格分隔的字符串转换为数组
            picture:product.picture? product.picture.split(','):[],
            detailsPicture:product.detailsPicture? product.detailsPicture.split(','):[],
          };
        });
        this.listLoading = false;
      }).catch(res => {
        this.$message.error("系统繁忙，请稍后重试!!!【400,404】")
      });
    },

    //2.点击分页实现
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getproductLists();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置当前页码为1
      this.getproductLists();
    },
    //3.关键字查询
    keywordQuery() {
      //假如当前页不在第一页，防止高级查询没有那么多页的时候出现空数据的问题
      this.currentPage = 1;
      this.getproductLists();
    },

    //5.删除
    handleDel: function (index, row) {
      if (!this.isEditDisabled(row.state)) {
      this.$confirm('确认删除该产品吗,该操作不可更改！', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/productList/delete/" + row.id).then(res => {
          if (res.data.success) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getproductLists();
          } else {
            this.$message.error("系统繁忙，请稍后重试!!!【500】");
          }
          this.listLoading = false;
        }).catch(res => {
          this.$message.error("系统繁忙，请稍后重试!!!【400,404】");
        })
      }).catch(() => {
      });
    }},
    //商品下架
    offShelf:function (index,row){
      if (!this.isOffShelfDisabled(row.state)) {
      if (row.state === 1) {
        this.$message.warning('该产品已下架，请勿重复操作');
        return;
      }
      this.$confirm('确认将该产品下架处理吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/productList/offShelf/"+row.id).then(res => {
          if (res.data.success) {
            this.$message({
              message: '下架成功',
              type: 'success'
            });
            this.getproductLists();
          } else {
            this.$message.error("系统繁忙，请稍后重试!!!【500】");
          }
          this.listLoading = false;
        }).catch(res => {
          this.$message.error("系统繁忙，请稍后重试!!!【400,404】");
        })
      }).catch(() => {
      });
    }},

    //6.选项改变时触发
    selsChange: function (sels) {
      this.sels = sels;
    },

    //7.批量删除
    batchRemove: function () {
      var ids = this.sels.map(item => item.id).toString();
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.patch("/stock", ids).then(res => {
          if (res.data.success) {
            //处理当前页
            //算总页数
            let totalPage = Math.ceil(this.total / this.pageSize);
            //当删除最后一页的所有数据，并且不是第一页，就让当前页-1
            if (this.currentPage == totalPage && (this.total - this.sels.length) % this.pageSize == 0 && this.currentPage != 1) {
              this.currentPage = this.currentPage - 1;
            }
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getproductLists();
          } else {
            this.$message.error("系统繁忙，请稍后重试!!!【500】");
          }
          this.listLoading = false;
        }).catch(res => {
          this.$message.error("系统繁忙，请稍后重试!!!【400,404】");
        })
      }).catch(() => {
      });

    },

    //8.显示编辑界面
    handleEdit: function (index, row) {
      if (!this.isEditDisabled(row.state)) {
      this.editForm = Object.assign({}, row);
      this.editFormVisible = true;
      this.getclassify();
    }},
    //8.显示详情界面
    showData: function (index, row) {
      this.showForm = Object.assign({}, row);
      this.showFormVisible = true;
      this.getclassify();
     this.getCategoryNameById();
    },
    //9.显示新增界面
    handleAdd: function () {
        this.$confirm('确认要添加新产品吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
            .then(() => {
              // 用户点击了确定，进行页面跳转到添加页面
              this.$router.push('/AddProduct'); // 请根据你的路由配置进行修改
            })
            .catch(() => {
              // 用户点击了取消，不进行任何操作
            });
      },


    editSubmit: function () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true;

            let para = Object.assign({}, this.editForm);
            para.label = para.label.join(' '); // 将标签数组转换为字符串
            para.picture = para.picture.join(','); // 将标签数组转换为字符串
            para.detailsPicture = para.detailsPicture.join(','); // 将标签数组转换为字符串
            this.$http.put("/productList", para).then(res => {
              if (res.data.success) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['editForm'].resetFields();
              } else {
                this.$message.error("系统繁忙，请稍后重试!!!【500】");
              }
              this.editLoading = false;
              this.editFormVisible = false;
              this.getproductLists();
              this.fileList = [];
            });
          });
        }
      });

    },
    //文件删除时的回调
    handleFileRemove(file, fileList) {
      //正式删除
      var fileName = null;
      if (file.response) {  //上传图片的时候点了删除
        fileName = file.response.resultObj;
      } else {  //点击修改回显的图片，点了删除
        fileName = file.url;
      }
      //为了方便参数传递,需要转换路径写法,把/替换为_
      fileName = fileName.replaceAll("/", "_");
      //发送请求
      this.$http.delete("/minio/" + fileName).then(res => {
        if (res.data.success) {
          this.$message.success("删除成功");
          this.fileList = [];
          this.addForm.picture = "";
        } else {
          this.$message.error("删除失败");
        }
      })
    },

    //新增详情图片
    handleFileUpload(response) {
      if (response.success) {
        this.editForm.detailsPicture.push(response.resultObj) ;
      }
    },
    handleFileUploadeditpicture(response) {
      if (response.success) {
        this.editForm.picture=[],
        this.editForm.picture.push(response.resultObj) ;
      }
    },
    //文件上传成功之后的修改页面回调
    handleFileUploadedit(response) {
      if (response.success) {
        // 从 editForm.picture 中移除选中的图片
        this.selectedImages.forEach(index => {
          this.editForm.detailsPicture.splice(index, 1);
        });

        // 将上传成功的图片 URL 添加到 editForm.picture 中
        this.editForm.detailsPicture.push(response.resultObj);

        // 清空 selectedImages 数组
        this.selectedImages = [];
      }
    },
    //上传超过数量的回调
    handleFileExceed() {
      this.$message.error("上传图片超过限制");
    },
  },

  mounted() {
    this.getproductLists();
  }
}

</script>

<style scoped>
.custom-divider {
  border: 0.1px solid #e6f1fe; /* 调整线的宽度和颜色 */
}
/*图片选中*/
.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 可根据需要调整对齐方式 */
}

.image-container {
  box-sizing: border-box;
  width: 180px;
  height: 180px;
  padding: 5px;
  margin: 5px; /* 可根据需要调整间距 */
  cursor: pointer;
}

.image {
  width: 100%;
  height: 100%;
}

.selected-icon {
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: blue;
  font-size: 20px;
}
.selectState {
  color: #4abe84;
  box-shadow: 0 2px 7px 0 rgba(85, 110, 97, 0.35);
  border-radius: 7px;
  border: 1px solid rgba(74, 190, 132, 1);
  width: 180px;
  height: 180px;
  position: absolute;
}
.selectState:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border: 17px solid #4abe84;
  border-top-color: transparent;
  border-left-color: transparent;
}
.selectState:after {
  content: "";
  width: 5px;
  height: 12px;
  position: absolute;
  right: 6px;
  bottom: 6px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
.image-container.upload-container {
  display: inline-block;
  width: 100px; /* 调整上传组件的宽度，可以根据实际情况调整 */
  height: 100px; /* 调整上传组件的高度，可以根据实际情况调整 */
  position: relative;
  cursor: pointer;

}

.image-container {
  margin-bottom: 10px; /* 可根据需要调整间距 */
  position: relative;
  cursor: pointer;
}





.tag-container {
  display: flex;
  align-items: center; /* 让标签垂直居中显示 */
  flex-wrap: wrap;
}

.status-label {
  padding: 5px;
  border-radius: 4px;

  display: inline-block;
}
.tag-label {
  background-color: #e6f1fe;
  color:#1d8ce0;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 8px; /* 间隔大小可以根据需要调整 */
  margin-bottom: 3px;
  white-space: nowrap; /* 防止文字换行 */
  display: inline-block; /* 让每个标签作为一个块级元素显示 */
}
.status-green {

  color: #42d885; /* 设置文字颜色，可根据需要调整 */
}
.status-red {

  color: #ff4d51; /* 设置文字颜色，可根据需要调整 */
}

.status-grey {

  color:#cac6c6; /* 设置文字颜色，可根据需要调整 */
}

</style>